<template>
  <div class="app-container">
    <div class="form-container">
      <div class="form-item">
        <div class="form-label">登录页方案</div>
        <div class="form-content">
          <el-radio-group v-model="loginScheme">
            <el-radio :label="1">方案一</el-radio>
            <el-radio :label="2">方案二</el-radio>
          </el-radio-group>
          
          <div class="scheme-preview">
            <div class="preview-box" :class="{ active: loginScheme === 1 }">
              <div class="preview-image">
                <div class="image-placeholder"></div>
              </div>
              <div class="preview-title">方案一</div>
            </div>
            <div class="preview-box" :class="{ active: loginScheme === 2 }">
              <div class="preview-image">
                <div class="image-placeholder-left"></div>
                <div class="image-placeholder-right"></div>
              </div>
              <div class="preview-title">方案二</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">登录页面完元素颜色</div>
        <div class="form-content">
          <div class="color-picker-container">
            <div class="color-block">#3265f5</div>
            <el-button class="refresh-btn" icon="Refresh" circle></el-button>
          </div>
          <div class="form-tip">提示：登录按钮、选中的超链接文字等明亮色完元素色</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label required">系统标题图(logo)</div>
        <div class="form-content">
          <div class="upload-container">
            <el-input v-model="logoFile" readonly placeholder="未选择文件"></el-input>
            <el-button class="upload-btn">
              <el-icon><Upload /></el-icon>
            </el-button>
          </div>
          <div class="form-tip">提示：系统全基于高度等比缩放，居中显示，推荐图片尺寸：360*80，参考大小10KB,格式：png</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label required">网页背景图(background)</div>
        <div class="form-content">
          <div class="upload-container">
            <el-input v-model="bgFile" readonly placeholder="未选择文件"></el-input>
            <el-button class="upload-btn">
              <el-icon><Upload /></el-icon>
            </el-button>
          </div>
          <div class="form-tip">提示：系统全基于宽度等比缩放，居中显示（高出部分不显示），推荐图片尺寸：1920*1080，建议大小不超过1MB，格式：jpg、jpeg、png</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">左侧信息图(img)</div>
        <div class="form-content">
          <div class="upload-container">
            <el-input v-model="infoFile" readonly placeholder="未选择文件"></el-input>
            <el-button class="upload-btn">
              <el-icon><Upload /></el-icon>
            </el-button>
          </div>
          <div class="form-tip">
            提示：1.方案一的配置，展示在左侧信息栏中中部显示<br>
            提示：2.系统会基于宽度等比缩放，居中显示，推荐图片尺寸：450*540，参考大小1MB，格式：jpg、jpeg、png
          </div>
        </div>
      </div>
      
      <!-- 添加保存按钮 -->
      <div class="form-item">
        <div class="form-label"></div>
        <div class="form-content">
          <el-button type="primary" @click="saveSettings">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Upload, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const loginScheme = ref(1)
const logoFile = ref('')
const bgFile = ref('')
const infoFile = ref('')

// 添加保存设置方法
const saveSettings = () => {
  // 这里添加保存逻辑，例如调用API
  ElMessage.success('登录页配置保存成功')
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 20px;
  background-color: #fff;
}

.form-container {
  max-width: 1000px;
}

.form-item {
  display: flex;
  margin-bottom: 24px;
  
  .form-label {
    width: 300px;
    line-height: 32px;
    text-align: right;
    padding-right: 12px;
    color: #606266;
    
    &.required:before {
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
    }
  }
  
  .form-content {
    flex: 1;
  }
  
  .form-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
    line-height: 1.5;
  }
}

.scheme-preview {
  display: flex;
  margin-top: 16px;
  
  .preview-box {
    width: 180px;
    margin-right: 20px;
    text-align: center;
    
    &.active {
      .preview-image {
        border-color: #3265f5;
      }
    }
    
    .preview-image {
      height: 120px;
      background-color: #f5f7fa;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .image-placeholder {
        width: 60px;
        height: 60px;
        background-color: #fff;
      }
      
      .image-placeholder-left {
        width: 60px;
        height: 60px;
        background-color: #fff;
        margin-right: 5px;
      }
      
      .image-placeholder-right {
        width: 60px;
        height: 60px;
        background-color: #fff;
      }
    }
    
    .preview-title {
      margin-top: 8px;
      font-size: 14px;
      color: #606266;
    }
  }
}

.color-picker-container {
  display: flex;
  align-items: center;
  
  .color-block {
    width: 200px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: #3265f5;
    color: #fff;
    border-radius: 4px;
  }
  
  .refresh-btn {
    margin-left: 8px;
  }
}

.upload-container {
  display: flex;
  align-items: center;
  
  .el-input {
    flex: 1;
  }
  
  .upload-btn {
    margin-left: 8px;
  }
}
</style>